import React from 'react';
import { useSize } from 'ahooks';
import pageBg from '@/assets/datang/page_bg.png';
import { default as HeadComponent } from './components/Head';
import LvDatang from './LvDatang';
import LvProvince from './LvProvince';
import styles from './index.less';

const tabs = ['全省层级', '大唐层级', '交易层级'];
const uiSize = { width: 1920, height: 1080 };
export default () => {
  const pageRef = React.useRef();
  const mainSize = useSize(pageRef);
  const [tab, setTab] = React.useState(tabs[0]);
  const [scale, setScale] = React.useState(1); // 缩放

  React.useEffect(() => {
    getScale();
  }, [mainSize?.width, mainSize?.height]);

  const getScale = () => {
    if (!mainSize) return;
    const w = mainSize.width / uiSize.width;
    const h = mainSize.height / uiSize.height;
    const _scale = w < h ? w : h;
    if (_scale !== scale) {
      setScale(_scale);
    }
  };

  return (
    <div
      className={styles.page}
      id="DaTangDashboard"
      style={{ backgroundImage: `url(${pageBg})` }}
      ref={pageRef}
    >
      <div
        style={{
          transform: `scale(${scale})`,
          width: uiSize.width,
          height: uiSize.height,
        }}
      >
        <div className={styles.head}>
          <HeadComponent tab={tab} tabs={tabs} onChangeTab={setTab} />
        </div>
        <div className={styles.main}>
          {tab === '全省层级' && <LvProvince />}
          {tab === '大唐层级' && <LvDatang />}
        </div>
      </div>
    </div>
  );
};
